<template>
  <div>
    <input v-model="firstName" />
    <br />
    <input v-model="lastName" />
    <h3>计算属性</h3>
    <div>{{ name1 }}</div>
    <h3>侦听器</h3>
    <div>{{ fullName }}</div>
  </div>
</template>

<script>
export default {
  name: "cCom",
  data() {
    return {
      firstName: "dai",
      lastName: "jun",
      fullName: ""
    };
  },
  computed: {
    name1() {
      return this.firstName + "" + this.lastName;
    }
  },
  watch: {
    firstName(val) {
      this.fullName = val + "" + this.lastName;
    },
    lastName(val) {
      this.fullName = this.firstName + "" + val;
    }
  }
};
</script>